<template>
	<div id="drinkCardView">
		<navAndBanner></navAndBanner>
		<div class="img1">

		</div>
		<div style="height:1px;border-top:3px solid #ffcc00;width:76.4%;margin:0 auto;"></div>				
		<div class="info">
			<div class="info1" style="margin-left: 5vw"><span class="info3">酒&nbsp卡&nbsp号</span><span class="info2">{{info.CJKH}}</span></div>
			<div class="info1"><span class="info3">存酒日期</span><span class="info2">{{info.LRSJ}}</span></div> 

			<div class="info1"><span class="info3">状&nbsp&nbsp&nbsp态</span><span class="info2">{{info.STATE}}</span></div>
		</div>
		<div class="info">
			<div class="info1" style="margin-left: 5vw"><span class="info3">客户姓名</span><span class="info2">{{info.KHMC}}</span></div>
			<div class="info1"><span class="info3">联系电话</span><span class="info2">{{info.KHDH}}</span></div> 

			<div class="info1"><span class="info3">会员号</span><span class="info2">{{info.KHBM}}</span></div>
		</div>
		<div class="info">
			<div style="margin-left: 5vw"><span class="info3">备&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp注</span><div style="width: 61.3vw;height: 100px;background-color: #eeeeee;display: inline-block;margin-left: 23px;border-radius: 15px;padding:12px">{{info.BZ}}</div></div>
		</div>
		<div style="margin:0 auto;width: 69vw;border-top: 2px solid #dfdddd;margin-top: 35px"></div>
		<div style="width: 69vw;margin: 0 auto;margin-top: 50px">
			<Table border :columns="columns4" :data="info.list"></Table>
		</div>
		<div>
			
		</div>
	</div>
</template>
<script>
	import navAndBanner from '../navAndBanner.vue'
	export default {
		components:{
			navAndBanner
		},
		data(){
			return{
				columns4:[

				{
					title: '序列',
					key: 'XH'
				},
				{
					title: '商品编码',
					key: 'SPBM'
				},
				{
					title: '商品名称',
					key: 'SPMC'
				},
				{
					title: '单位',
					key: 'JLDW'
				},
				{
					title: '数量',
					key: 'SL'
				},
				{
					title: '库存',
					key: 'CGSL'
				},
				{
					title: '存期',
					key: 'address'
				},
				{
					title: '到期日期',
					key: 'YXQ'
				},
				{
					title: '去源/去向',
					key: 'address'
				}
				],
				info:{},
				userinfo:{}
			}
		},
		mounted(){
			// this.CJKH = sessionStorage.CJKH
			this.userinfo = JSON.parse(sessionStorage.userinfo).data;
			var _this = this
			this.$http.post(`${this.URL}/api/ws/storage_detail`,{
				token:_this.userinfo.token,
				userid:_this.userinfo.YHBM,
				timestamp:new Date().getTime(),
				CJKH:sessionStorage.CJKH

			})
			.then(function  (res) {
				// body...
				_this.info = res.data.data
			})
		}
	}
</script>
<style scoped>
	.img1{
		background: url(../../assets/img/Title7.png);
		width: 754px;
		height: 77px;
		margin:0 auto;
		margin-top: 90px;margin-bottom: 80px;
	}
	.navAndBanner{
		background:linear-gradient(30deg,#b490ca,#5ebbe7);
		width: 100%;
		height: 120px;
		vertical-align: middle;
		padding-top: 40px
		
	}
	a{
		text-decoration: none;
	}
	nav ul li{
		display: inline-block;
		vertical-align: middle;
		margin-right: 5%
	}
	nav ul li a{
		font-size: 24px;
		color: #999999;
	}
	nav ul li:first-child{
		margin-left: 13%;
		margin-right: 15%;
	}
	nav ul li:last-child{
		margin-top: 12px;
		float: right
		
	}
	body{background-color: #1E1E1E}
	*{padding:0;margin: 0;list-style:none;font-family: "微软雅黑"}
	.footer{
		height: 125px;
		width: 100%;
		background:linear-gradient(30deg,#b490ca,#5ebbe7);
		text-align: center;
		vertical-align: middle;
		color: white;
		padding-top: 50px
	}
	.info2{
		width: 14.5vw;
		height: 50px;
		background-color: #eeeeee;
		display: inline-block;
		border-radius: 15px;
		margin-left: 23px
	}
	.info1{
		width: 20.8vw;
		display: inline-block;
		flex: 1;
		height: 50px;
	}
	.info{
		width: 76.4vw;	
		margin: 0 auto;
		padding: 14px 0px;
		font-size: 20.5px;
		display: flex;
		color: black;


	}
	span{
		padding-top: 10px;
		padding-left: 20px
	}
</style>
